<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>乐鲜生活后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/AdminLTE.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/skins/_all-skins.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/admin-lte/2.4.3/js/adminlte.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="css/index/index.css" />
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="../resource/ply/Ply.min.js"></script>
  <link rel="stylesheet" href="../resource/ply/ply.css">

  <style>
    .input {
      width: 100%;
    }
  </style>
</head>

<body class="skin-purple">
  <!-- Main Header -->
  <header id="app-header">
    <component-header></component-header>
  </header>

  <script src="../js/header.js"></script>

  <aside id="app-sidebar">
    <component-sidebar></component-sidebar>
  </aside>

  <script src="../js/sidebar.js"></script>

  <div id="sellers">
    <component-content title="商家管理">
      <div class="callout callout-info">
        <h4>提示!</h4>

        <p>提下给出了所有商家的信息，只有超级管理员可以删除商家和修改商家信息</p>
      </div>
      <component-box class="box-solid box-primary" title="所有商户信息">
        <div class="col-sm-12 dataTables_wrapper form-inline dt-bootstrap">
          <div class="row">
            <div class="col-sm-2">
              <button class="btn btn-block btn-primary" type="button" @click="addItem" :disabled="isAdding">添加新商家</button>
            </div>
            <div class="col-sm-8"></div>
            <div class="col-sm-2">
              <div class="input-group row  pull-right">
                <input type="text" class="form-control" placeholder="搜索..." v-model="currentSearchPattern">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" @click="performSearch" :disabled="isSearching">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
          </div>
          <table class="table table-striped table-hover dataTable">
            <thead>
              <th class="sorting_asc col-md-2 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">商家名称</h4>
              </th>
              <th class="sorting_asc col-md-3 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">商家地址</h4>
              </th>
              <th v-if="isModifying" class="sorting_asc col-md-1 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">经度</h4>
              </th>
              <th v-if="isModifying" class="sorting_asc col-md-1 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">纬度</h4>
              </th>
              <th class="sorting_asc col-md-2 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">联系电话</h4>
              </th>
              <th class="sorting_asc col-md-2 text-center" tableindex="0" rowspan="1" colspan="1" aria-sort="ascending">
                <h4 style="font-weight: bold">操作</h4>
              </th>
            </thead>
            <tbody>
              <tr role="row" v-for="(seller, index) in sellers">
                <td class="text-center" v-if="!isModifying[index]">
                  <h5>{{seller.store_name}}</h5>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="text-center form-control" v-model="seller.store_name">
                </td>
                <td class="text-center" v-if="!isModifying[index]">
                  <h5>{{seller.address}}</h5>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="text-center form-control" style="width: 300px" v-model="seller.address">
                </td>
                <td class="text-center" v-if="!isModifying[index]">
                  <h5>{{seller.longitude}}</h5>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="text-center form-control" style="width: 100px" v-model="seller.longitude">
                </td>
                <td class="text-center" v-if="!isModifying[index]">
                  <h5>{{seller.latitude}}</h5>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="text-center form-control" style="width: 100px" v-model="seller.latitude">
                </td>
                <td class="text-center" v-if="!isModifying[index]">
                  <h5>{{seller.phone}}</h5>
                </td>
                <td v-if="isModifying[index]">
                  <input type="text" class="text-center form-control" v-model="seller.phone">
                </td>
                <td class="row">
                  <div class="col-xs-1"></div>
                  <button v-if="!isModifying[index]" type="button" class="btn btn-lg btn-primary col-xs-4 btn-sm" @click="modifyItem(index)">修改</button>
                  <button v-if="isModifying[index]" type="button" class="btn btn-lg btn-success col-xs-4 btn-sm" @click="submitItem(index)">提交</button>
                  <div class="col-xs-1"></div>
                  <button type="button" class="btn btn-lg btn-danger col-xs-4 btn-sm" disabled="true" @click="deleteItem(index)">删除</button>
                </td>
              </tr>
            </tbody>

          </table>
      </component-box>
      <script src="../js/box.js"></script>

    </component-content>
    <script src="../js/content.js"></script>
    </div>

    <script src="../js/sellerManager.js"></script>

</body>

</html>